<template>
  <div class="bg-efef" v-if="detail">
    <van-nav-bar
      title="岗位详情"
      left-text="返回"
      left-arrow
      @click-left="handleBack"
    />
    <div class="p-30 bg-fff">
      <div class="flex justify-between">
        <h3 class="fs-32">{{ detail.jobname }}</h3>
        <span class="color-yellow">{{ detail.salary }}元/月</span>
      </div>
      <div class="m-t-15">
        <span v-for="(item, index) in detail.info" :key="index">
          {{ item }}
          <span v-if="index < detail.info.length - 1">|</span>
        </span>
      </div>
    </div>
    <div class="p-30 bg-fff">
      <h3 class="fs-30">岗位要求</h3>
      <div class="m-t-15">
        学历:{{ eduList[detail.edu] }} 性别:{{ genderList[detail.gender] }}
      </div>
    </div>
    <div class="p-30 bg-fff m-t-15">
      <h3 class="fs-30">招聘详情</h3>
      <div class="m-t-15">
        <p>工作日期:{{ detail.date[0] }}~{{ detail.date[1] }}</p>
        <p>工作时间:{{ detail.time[0] }}~{{ detail.time[1] }}</p>
      </div>
    </div>
    <div class="p-30 bg-fff">
      <h3 class="fs-30">岗位详情</h3>
      <div class="m-t-15" v-html="detail.detail"></div>
    </div>
    <div class="p-30 bg-fff">
      <h3 class="fs-30">工作地点</h3>
    </div>
    <van-cell title-class="address" :title="detail.address" is-link value="500m" />
    <div class="p-30 bg-fff">
      <div class="map" ref="mapRef"></div>
    </div>

    <div class="btn-cont p-30">
      <van-button v-if="status==1" @click="handleJoin" type="warning" block>立即报名</van-button>
      <van-button v-if="status==2" type="default" block>正在审核</van-button>
      <van-button v-if="status==3" type="info" block>等待面试</van-button>
      <van-button v-if="status==4" type="primary" block>已被录取</van-button>
      <van-button v-if="status==5" type="danger" block>已被拒绝</van-button>
    </div>
  </div>
</template>

<script>
import AMapLoader from "@amap/amap-jsapi-loader";
import {mapState} from 'vuex'
import {jobGet,jobJoin,jobJoinGet} from '../api/job'
export default {
  data() {
    return {
      detail: null,
      eduList: ["不限", "博士", "硕士", "本科", "专科", "高中"],
      genderList: ["不限", "女生", "男生"],
      map: null, //存放地图实例对象
      status:1   //标志报名状态的
    };
  },
  computed: {
    // 方法1:
    // userInfo() {
    //   return this.$store.state.user.userInfo 
    // },
    // num() {
    //   return this.$store.state.count.num 
    // }
    // 方法2：
    ...mapState({
      userInfo:state=>state.user.userInfo,
      num:state=>state.count.num
    })
  },
  created() {
    // this.detail = this.$route.query;
    let jobId = localStorage.getItem('jobId')
    jobGet({_id:jobId}).then(res=>{
      // console.log(res);
      this.detail = res.data.data[0]
    })

    //判断当前用户是否报名过当前岗位
    let userId = this.userInfo?this.userInfo.id:''
    jobJoinGet({jobId,userId}).then(res=>{
      console.log('报名表查询结果',res);
      if(res.data.data){
        this.status = res.data.data.status
      }
    })

  },
  mounted() {
    let {lnglat} = this.$route.query
    this.initMap(lnglat);
  },
  methods: {
    handleJoin(){
      console.log(this.userInfo);
      if(!this.userInfo){ //登录判断
        this.$router.push({
          path:'/login',
          query:{
            target:'/detail'
          }
        })
        return
      }
      let {_id,jobname,salary,address,district} = this.detail
      let userId = this.userInfo._id //用户id
      jobJoin({  //触发报名请求
        jobId:_id,
        userId,
        address,jobname,salary,district,
        status:2
      }).then(res=>{
        console.log(res);
        if(res.data.code==101){
          this.status = 2 //修改本地报名按钮状态
        }
      })

    },
    handleBack(){
      this.$router.back()
    },
    initMap(lnglat) {
      AMapLoader.load({
        key: "326929be57e60ab4ae208dfbbf54063d", // 申请好的Web端开发者Key，首次调用 load 时必填
        version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
        plugins: [""], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
      })
        .then((AMap) => {
          this.map = new AMap.Map(this.$refs.mapRef, {
            //设置地图容器id
            // viewMode:"3D",    //是否为3D地图模式
            zoom: 12, //初始化地图级别
            center: lnglat, //初始化地图中心点位置
          });
          this.addMarker(lnglat)
        })
        .catch((e) => {
          console.log(e);
        });
    },
    addMarker(lnglat) { //为地图添加点标记
        var marker = new AMap.Marker({
            icon: "//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png",
            position: lnglat,
            offset: new AMap.Pixel(-13, -30)
        });
        marker.setMap(this.map);
    }
  },
};
</script>

<style lang="less" scoped>
.map {
  height: 30rem;
  // border: 1px solid red;
}
.address{
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
/deep/ .van-nav-bar .van-icon,
/deep/ .van-nav-bar__text{
  color: #000;
}
.btn-cont{
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  background: rgba(255,255,255,0.3);
  box-shadow: 0 0 10px 2px rgba(0,0,0,0.3);
  box-sizing: border-box;
}
</style>
